<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import PocketBase from 'pocketbase';
const pb = new PocketBase('https://autoreport.site:8888')
const messageValue = ref({
  name: '',
  content: '',
  phone: '',
})

const submitClick = async() =>  {
  if (messageValue.value.name === '')
    Message.info('名前を入力してください')

  if (messageValue.value.phone === '')
    Message.info('電話番号を入力してください')

  if (messageValue.value.name !== '' && messageValue.value.phone !== '') {
    await pb.collection('message').create(messageValue.value).then((res) => {
      Message.success('メッセージは受け取りました')
      messageValue.value = {
        name: '',
        content: '',
        phone: '',
      }
    })
  }
}
</script>

<template>
  <div class="w-full h-[570px] bg-[#1f242b] relative">
    <div class="py-[60px] px-[10%] h-[480px]">
      <div class="text-[40px] text-white mb-[0.5em]">
        お問い合わせ
      </div>

      <a-row :gutter="24">
        <a-col :span="16">
          <a-row>
            <a-col :span="12">
              <input
                v-model="messageValue.name"
                class="w-[90%] h-[50px] bg-[#2f3640] list-none border-0 outline-none p-[10px] text-white" name="name"
                placeholder="名前を入力してください"
              >
              <input
                v-model="messageValue.phone"
                class="w-[90%] h-[50px] bg-[#2f3640] list-none border-0 outline-none mt-[20px] p-[10px] text-white"
                name="phone" placeholder="電話番号を入力してください"
              >
            </a-col>
            <a-col :span="12">
              <textarea
                v-model="messageValue.content"
                class="w-[90%] h-[120px] bg-[#2f3640] list-none border-0 outline-none p-[20px] text-white align-top"
                name="message" placeholder="メッセージ内容を入力してください"
              />
            </a-col>
            <a-button class="text-white mt-[54px] text-[18px] w-[140px] h-[46px]" type="primary" @click="submitClick">
              送信
            </a-button>
          </a-row>
        </a-col>
        <a-col :span="8" style="color: white; padding-left: 40px">
          <div class="text-[16px] text-white font-[500] mb-[1em] mt-0">
            上海ですジャントンテクノロジー
          </div>
          <div class="text-[#ccc] text-[16px] font-[500] mb-[1em] mt-0">
            メールアドレス: sales@jungt.com
          </div>
          <div>
            <img alt="二维码" src="/WeChat-official-account.png" style="width: 110px; height: 110px; margin-left: 60px">
            <div
              style="
                margin-left: 35px;
                margin-top: 1em;
                color: #ffffff;
              "
            >
              公式アカウントです
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <footer
      class="w-full flex justify-center items-center mt-[30px] bg-[#1b1e21] text-white h-[60px] leading-[60px] border-t-[1px] border-[#292d34]"
    >
    Shanghai Jiangtong Technology Co., Ltd.
      <a href="https://beian.miit.gov.cn/" style="list-style: none; text-decoration: none; color: purple; margin: 0 8px;">ICP</a>
      No.18029365
    </footer>
  </div>
</template>

<style scoped>
:deep(.arco-btn-size-medium) {
  @apply text-white mt-[54px] text-[18px] w-[140px] h-[46px];
}
</style>
